<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>最简单的布局</title>
<script type="text/javascript" src="./scripts/jquery-1.9.0.js"></script>

<script type="text/javascript" src="./scripts/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/jquery-ui/css/ui-lightness/jquery-ui-1.10.0.custom.css" />

<script type="text/javascript" src="./scripts/jquery.layout-latest.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/layout-default-latest.css" />
<script type="text/javascript" src="./scripts/debug.js"></script>
<style type="text/css"> 
body {   
    font-family: 宋体,Geneva, Arial, Helvetica, sans-serif;   
    font-size:   80%;   
    *font-size:  80%;   
}   
  
/*   
三种必备样式为：   
paneClass:    "ui-layout-pane" 窗格样式   
resizerClass: "ui-layout-resizer" 拉动条样式   
togglerClass: "ui-layout-toggler" 拉动条上按钮样式   
*/   
  
/*   
 所有窗格应用的样式,也是必备样式   
ui-layout-pane    
ui-layout-pane-[PANE-NAME]（东南西北中，如：ui-layout-pane-west。这个样式放入基本样式下方，可覆盖原样式。 ）    
ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打开时的样式）   
ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定东南西北中一个窗格在某状态下的样式。）   
*/   
.ui-layout-pane {    
    background: #dfe8f6;   
    border:     0px solid #8db2e3;   
    padding:    10px;    
    overflow:   auto;   
}   
    /*非必备样式，描述窗格中的内容*/   
    .ui-layout-content {   
        padding:    10px;   
        position:   relative;    
        overflow:   auto;   
    }   
  
/*   
 *  所有拉动条的样式   
 */   
.ui-layout-resizer-west{    
    background:     #455d89;   
    border:         1px solid #BBB;   
    border-width:   0;   
    width:5px;
    }   
    /*   
     * 拉动条拉动时，保持不动的拉动条样式，不明白修改背景测试。   
     */   
    .ui-layout-resizer-drag {   
    }   
       
    /*鼠标移动到拉动条时的样式*/   
    .ui-layout-resizer-hover{   
    }   
    /*    
     *拖动拉动条时，拉动条的样式，据说是设置“打开悬停”和“拖动”为同一样式。   
     */   
    /*.ui-layout-resizer-open-hover ,   */   
    .ui-layout-resizer-dragging {      
        background:#aaaaaa;   
    }   
  
    /*拖动拉动条时，到最大或最小边缘时的样式*/   
    .ui-layout-resizer-dragging-limit {   
        background: #E1A4A4; /* red */   
    }   
  
    /*拉动条关闭时，的样式。*/   
    .ui-layout-resizer-closed-hover {    
        background: #435b87;   
    }   
       
    /*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时拉动条的样式*/   
    .ui-layout-resizer-sliding {       
        opacity: .10;    
        filter:  alpha(opacity=10);   
        }   
        /*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时，鼠标悬停在拉动条上的样式*/   
        .ui-layout-resizer-sliding-hover {   
            opacity: 1.00;    
            filter:  alpha(opacity=100);   
        }   
  
  
  
       
  
/*   
 *  拖动杆上的按钮   
 */   
.ui-layout-toggler {   
   background:url(images/westSplit.jpg) no-repeat;   

    }   
       
/*   
    鼠标悬停在拉动条时的样式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。   
    .ui-layout-resizer-hover   
 */   
       
       
    /*鼠标悬停在拖动条上按钮的样式*/   
    .ui-layout-toggler-hover {   
        background-color: #0099FF；   
        opacity: 1.00;   
        filter:  alpha(opacity=100);   
    }   
       
    /*窗格关闭后，半打开状态的拉动条是隐藏的*/   
    .ui-layout-resizer-sliding  ui-layout-toggler {   
        display: none;   
    }   
  
  
/*貌似是按钮上的文字内容*/   
    .ui-layout-toggler .content {   
        color: #66FFCC;   
        font-size:      12px;   
        font-weight:    bold;   
        width:          100%;   
        padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */   
    }  
 .ui-layout-resizer-west-open{background-color:#435b87;}
 .ui-layout-toggler-west-open{background:url(images/westSplit.jpg) no-repeat;width:5px; height:35px; border:none;}
 .ui-layout-center{background-color:#435b87;padding:0px 8px 0px 0px;}
 .ui-layout-west{ background-color:#435b87; padding:0px 0px 0px 8px;}
 
 .inner-center{ background:#f5f5f5;}
 .inner-east{ background:#f5f5f5;}
 .inner-south{ background:#f5f5f5;}
 #main-layout .ui-layout-resizer-south-open{background:#435b87;}
  #main-layout .ui-layout-resizer-east-open{background:#435b87;}
  .ui-layout-resizer-east-closed{background:#435b87;}
  .ui-layout-resizer-south-closed{background:#435b87;}
  .ui-layout-toggler-south-open{background:url(images/southSplit.jpg) no-repeat;border:none;}
  .ui-layout-toggler-south-closed{background:url(images/southSplit.jpg) no-repeat; border:none;}
 
    </style> 
    <script type="text/javascript">
    var pageLayout;
 
    $(document).ready(function(){
        // create page layout
        pageLayout = $('body').layout({
            scrollToBookmarkOnLoad:        false // handled by custom code so can 'unhide' section first
        ,    defaults: {
              contentSelector:        ".content"    // inner div to auto-size so only it scrolls, not the entire pane!
            }
        ,    north: {
                size:                    80
            ,    spacing_open:            0
            ,    closable:                false
            ,    resizable:                false
            }
        ,    west: {
                size:                    280
            ,    spacing_closed:            10
            ,    togglerLength_closed:    140
            ,    togglerAlign_closed:    "center"
            //,    togglerContent_closed:    "设<br><br>置"
            ,    togglerTip_closed:        "Open & Pin Contents"
            ,    sliderTip:                "Slide Open Contents"
            ,    slideTrigger_open:        "mouseover"
            }
        ,
        south: {
                size:                    40
            ,    spacing_open:            0
            ,    closable:                false
            ,    resizable:                false
            }
        });
        
        innerLayout = $('#main-layout').layout({ 
            center__paneSelector:    ".inner-center" 
        ,    west__paneSelector:        ".inner-west" 
        ,    east__paneSelector:        ".inner-east" 
        ,   south__paneSelector:    ".inner-south"
        ,    west__size:                200 
        ,    east__size:                300 
        ,   south__size:            75
        ,    spacing_open:            8  // ALL panes
        ,    spacing_closed:            8  // ALL panes
        ,    west__spacing_closed:    12
        ,    east__spacing_closed:    12
   
        }); 
 
        $("#topmenu li").mouseover(function(){
            //alert($(this).attr("class"));
            if($(this).attr("class")!="current")
            {
                if(!$(this).hasClass("hover"))
                {
                    $(this).addClass("hover");
                }
            }
        });
        $("#topmenu li").mouseout(function(){
            if($(this).attr("class")!="current")
            {
                if($(this).hasClass("hover"))
                {
                    $(this).removeClass("hover");
                }
            }
        });
    });
    </script>
</head>
<body>
<div id="top" class="ui-layout-north">
    <div id="logo"><img src="images/logo.jpg" width="427" height="52" /></div>
    <div id="topmenu">
       <ul>
       <li class="current"><a href="#">灾害地图</a></li>
       <li><a href="#">灾害查询</a></li>
       <li><a href="#">数据统计</a></li>
       </ul>
    </div>
    <div id="info">尊敬的用户，欢迎进入中国</div>
</div>
<DIV class="ui-layout-center">
       <div class="panlheader">
               <span><a>详细信息</a></span>
       </div>
       <div id="main-layout" class="panelmain content">
            <div class="inner-center">Inner Center</div> 
            <div class="inner-east">Inner East</div> 
             <div class="inner-south">Inner South</div> 

       </div>
</DIV>   

<DIV class="ui-layout-west">
    
       <div class="panlheader">
               <span><a>时间段选择</a></span>
       </div>
       <div class="panelmain content">
       </div>
<div id="queryl">
 <strong>全文检索</strong><br />
 <input name="input" type="text" />
 <input type="button" value="搜索" />
 <input type="button" value="高级" />
</div>
<div id="option">
</div>
</DIV> 
<DIV id="foot" class="ui-layout-south">South</DIV>    
</body>
</html>